<template>
  <div>
    <el-form ref="ruleForm" :model="submitForm" :rules="rules" label-width="200px" class="meal_form">
      <el-form-item label="套餐名字" prop="title">
        <el-input v-model="submitForm.title" style="width:100%" maxlength="50" show-word-limit placeholder="请输入套餐名字，如城市+品牌+型号+产品属性" />
      </el-form-item>
      <el-form-item label="租期设置" prop="lease_set">
        <el-radio-group v-model="submitForm.lease_set" @change="changeType">
          <el-radio :label="1">按月</el-radio>
          <el-radio :label="2">按天</el-radio>
          <el-radio :label="3">自定义租期</el-radio>
        </el-radio-group>
        <div class="set_wrap">
          <template v-if="submitForm.lease_set == 1">
            <div v-if="monthList.length > 0" class="set_form">
              <template v-for="(item, index) in monthList">
                <div :key="index" class="flex align-center item">
                  <div>
                    <label><i class="required-icon">*</i>租期:</label>
                    <el-select v-model="item.lease_time" clearable placeholder="请选择" @change="itemChange(index)">
                      <el-option v-for="itemMonth in monthSelect" :key="itemMonth" :label="item + '个月'" :value="item" />
                    </el-select>
                  </div>
                  <div style="margin-left:40px;margin-right:20px">
                    <label><i class="required-icon">*</i>月租金:</label>
                    <el-input v-model="item.lease_price" placeholder="元" clearable @blur="changeMoneyInput(item, 'lease_price')" @change="itemChange(index)" />
                  </div>
                  <el-button type="text" @click="removeMonthItem(index)">删除</el-button>
                </div>
              </template>
            </div>
            <el-button icon="el-icon-plus" size="small" type="primary" class="add_btn" @click="addMonthItem">添加租期</el-button>
          </template>
          <template v-if="submitForm.lease_set == 2">
            <p class="color-999">租期设置超过30天时，租期间隔为30天扣款一次。</p>
            <div v-if="dayList.length > 0" class="set_form day_form">
              <template v-for="(dayItem, dayIndex) in dayList">
                <div :key="dayIndex" class="flex align-center item">
                  <div>
                    <label><i class="required-icon">*</i>租期:</label>
                    <div class="inline-block">
                      <el-input v-model="dayItem.lease_time" style="width:100px" placeholder="请输入" clearable @input="val => changeNumberInput(dayItem, 'lease_time')" @change="itemChange(dayIndex)" />
                      <span class="suffix">天</span>
                    </div>
                    <span class="color-999" style="margin-left:10px">输入范围：1-365</span>
                  </div>
                  <div style="margin-left:40px;margin-right:20px">
                    <label><i class="required-icon">*</i>日租金:</label>
                    <el-input v-model="dayItem.lease_price" placeholder="元" clearable @change="itemChange(dayIndex)" @blur="changeMoneyInput(dayItem, 'lease_price')" />
                  </div>
                  <el-button type="text" @click="removeDayItem(dayIndex)">删除</el-button>
                </div>
              </template>
            </div>
            <el-button icon="el-icon-plus" size="small" type="primary" class="add_btn" @click="addDayItem">添加租期
            </el-button>
          </template>
          <template v-if="submitForm.lease_set == 3">
            <div>
              <p>自定义租期设置<span style="margin-left:20px" class="color-999">在下方栏中选择内容并生成表格</span></p>
              <div class="flex flex-wrap align-center custom_form">
                <div>
                  <span class="suffix before"><i class="required-icon">*</i>总租期</span>
                  <el-input v-model="customForm.lease_days" style="width:100px" placeholder="0-365天" clearable @input="val => changeNumberInput(customForm, 'lease_days')" />
                </div>
                <div>
                  <span class="suffix before"><i class="required-icon">*</i>租期间隔</span>
                  <el-select v-model="customForm.withhold_cycle" style="width:100px" clearable placeholder="请选择">
                    <el-option v-for="(item, index) in intervalList" :key="index" :label="item + '天'" :value="item" />
                  </el-select>
                </div>
                <div>
                  <span class="suffix before">每期租金</span>
                  <el-input v-model="customForm.lease_price" class="no_border" style="width:160px" placeholder="请输入" clearable @blur="changeMoneyInput(customForm, 'lease_price')" />
                  <span class="suffix">元</span>
                </div>
                <el-button icon="el-icon-plus" size="small" type="primary" style="margin-bottom:10px" @click="addCustomItem">生成自定义租期</el-button>
              </div>
              <p class="color-999" style="line-height:23px">1. 租期间隔根据设置总租期生成期数，多余的租赁天数单独生成一个期数。<br>2. 每个租期可单独设置租赁金额。
              </p>
            </div>
            <div v-for="(customItem, cIndex) in customList" :key="cIndex" class="custom_item">
              <p>租期{{ cIndex + 1 }}</p>
              <div class="flex align-center" style="width:800px;position:relative;padding-right:70px">
                <el-table class="table_item" :data="customItem" border>
                  <el-table-column align="center" label="期数" width="100px">
                    <template slot-scope="scope">
                      <span>第{{ scope.row.which_period }}期</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="租赁天数">
                    <template slot-scope="scope">
                      <span>{{ scope.row.lease_days }}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="租期间隔">
                    <template slot-scope="scope">
                      <span>{{ scope.row.withhold_cycle }}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="200">
                    <template slot="header">
                      <span><i class="required-icon">*</i>每期租金</span>
                    </template>
                    <template slot-scope="scope">
                      <div>
                        <el-input v-model="scope.row.lease_price" style="width:120px;" placeholder="请输入" clearable @blur="changeMoneyInput(scope.row, 'lease_price')" />
                        <span class="suffix">元</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <p class="delete_btn">
                  <el-button type="text" @click="removeCustomItem(cIndex)">删除</el-button>
                </p>
              </div>
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item v-if="rentType == 2 && (submitForm.lease_set == 2 || submitForm.lease_set == 1)" label="花呗分期">
        <el-checkbox v-model="submitForm.is_huabei" :true-label="1" :false-label="2">商品支持花呗分期</el-checkbox>
        <p class="tip">注：花呗分期商品成单后并结算后，供应商得租期总金额。了解花呗分期介绍</p>
      </el-form-item>
      <el-form-item v-if="rentType == 2 && (submitForm.lease_set == 2 || submitForm.lease_set == 1) && submitForm.is_huabei == 1" label="花呗设置">
        <div class="set_wrap">
          <p>批量设置<span style="margin-left:20px" class="color-999">在下方栏中选择内容进行批量填充</span></p>
          <div class="flex flex-wrap align-center custom_form">
            <div>
              <span class="suffix before">花呗3期</span>
              <el-select v-model="setForm.third" style="width:120px" clearable placeholder="请选择">
                <el-option label="商家承担" :value="1" />
                <el-option label="用户承担" :value="2" />
                <el-option label="关闭" :value="3" />
              </el-select>
            </div>
            <div>
              <span class="suffix before">花呗6期</span>
              <el-select v-model="setForm.sixth" style="width:120px" clearable placeholder="请选择">
                <el-option label="商家承担" :value="1" />
                <el-option label="用户承担" :value="2" />
                <el-option label="关闭" :value="3" />
              </el-select>
            </div>
            <div>
              <span class="suffix before">花呗12期</span>
              <el-select v-model="setForm.twelve" style="width:120px" clearable placeholder="请选择">
                <el-option label="商家承担" :value="1" />
                <el-option label="用户承担" :value="2" />
                <el-option label="关闭" :value="3" />
              </el-select>
            </div>
            <el-button size="small" type="primary" @click="quickSet">立即设置</el-button>
          </div>
          <el-table class="set_table" :data="submitForm.huabei_data" border>
            <el-table-column align="center" label="租期设置" width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.lease_term ? (scope.row.lease_term + (submitForm.lease_set == 1 ? '个月' : '天')) : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="花呗总金额" prop="rent_total" />
            <el-table-column align="center">
              <template slot="header">
                <span><i class="required-icon">*</i>花呗3期承担-承担金额</span>
              </template>
              <template slot-scope="scope">
                <el-select v-model="scope.row.three_bear" style="width:120px" clearable placeholder="请选择" @change="changeHbBear(scope.row.three_bear, scope.row, 'three_fee')">
                  <el-option label="商家承担" :value="1" />
                  <el-option label="用户承担" :value="2" />
                  <el-option label="关闭" :value="3" />
                </el-select>
                <span class="inline-block text-left" style="min-width:60px;margin-left:10px">
                  {{ scope.row.three_fee ? '￥' + scope.row.three_fee : '' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header">
                <span><i class="required-icon">*</i>花呗6期承担-承担金额</span>
              </template>
              <template slot-scope="scope">
                <el-select v-model="scope.row.six_bear" style="width:120px" clearable placeholder="请选择" @change="changeHbBear(scope.row.six_bear, scope.row, 'six_fee')">
                  <el-option label="商家承担" :value="1" />
                  <el-option label="用户承担" :value="2" />
                  <el-option label="关闭" :value="3" />
                </el-select>
                <span class="inline-block text-left" style="min-width:60px;margin-left:10px">
                  {{ scope.row.six_fee ? '￥' + scope.row.six_fee : '' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header">
                <span><i class="required-icon">*</i>花呗12期承担-承担金额</span>
              </template>
              <template slot-scope="scope">
                <el-select v-model="scope.row.twelve_bear" style="width:120px" clearable placeholder="请选择" @change="changeHbBear(scope.row.twelve_bear, scope.row, 'twelve_fee')">
                  <el-option label="商家承担" :value="1" />
                  <el-option label="用户承担" :value="2" />
                  <el-option label="关闭" :value="3" />
                </el-select>
                <span class="inline-block text-left" style="min-width:60px;margin-left:10px">
                  {{ scope.row.twelve_fee ? '￥' + scope.row.twelve_fee : '' }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex color-999" style="line-height:1;margin-top:14px"><span>注：</span>
            <p>1、花呗分期每笔均产生分期手续费，商户可选择用户或自己承担或者关闭当前租期花呗功能（无法共同承担）。<br>2、花呗手续费承担方选择后，将自动计算承担金额。
              <el-popover placement="right" width="400" trigger="hover">
                <div class="fee_exp">
                  <h5 style="margin-bottom:14px">手续费花呗分期费率表</h5>
                  <el-table class="fee_table" :data="feeData" border>
                    <el-table-column align="center" label="期数" prop="num" />
                    <el-table-column align="center" label="商户承担" prop="merchant" />
                    <el-table-column align="center" label="用户承担" prop="user" />
                  </el-table>
                </div>
                <el-button slot="reference" type="text">查看费率表</el-button>
              </el-popover>
            </p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="起租日设置">
        <el-select v-model="submitForm.start_date" clearable placeholder="请选择">
          <el-option v-for="(item, index) in startDateSelect" :key="index" :label="item + '天'" :value="item" />
        </el-select>
        <p class="tip">起租日为租赁合同起租时间，默认起租日为下单日3天后。</p>
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input v-model="submitForm.quantity" placeholder="库存数量" clearable @input="val => changeNumberInput(submitForm, 'quantity')" />
      </el-form-item>
      <el-form-item label="押金" prop="foregift">
        <div>
          <el-input v-model="submitForm.foregift" class="suffix_input" placeholder="请输入押金" clearable @blur="changeMoneyInput(submitForm, 'foregift')" />
          <span class="suffix">元</span>
        </div>
        <p class="tip">当前商品合同类型为随租随还，芝麻信用授权可扣款金额=商品套餐押金+总租金</p>
      </el-form-item>
      <el-form-item label="是否买断" prop="is_buy_out">
        <el-radio v-model="submitForm.is_buy_out" :label="1">是</el-radio>
        <el-radio v-model="submitForm.is_buy_out" :label="2">否</el-radio>
      </el-form-item>
      <el-form-item label="官网价格" prop="price">
        <div>
          <el-input v-model="submitForm.price" class="suffix_input" placeholder="请输入官网价格" clearable @blur="changeMoneyInput(submitForm, 'price')" />
          <span class="suffix">元</span>
        </div>
        <!-- <p class="tip">商家需设置销售价格，租户在租期中，买断价格=销售价格-累计支付的租期金额，商家也可根据实际情况在订单单独设置买断金额。</p> -->
      </el-form-item>
      <el-form-item label="买断价" prop="buyout_amount">
        <div>
          <el-input v-model="submitForm.buyout_amount" class="suffix_input" placeholder="请输入买断价" clearable @blur="changeMoneyInput(submitForm, 'buyout_amount')" />
          <span class="suffix">元</span>
        </div>
      </el-form-item>
    </el-form>
    <div class="fix-footer-btns">
      <el-button size="small" @click="$router.go(-1)">返回</el-button>
      <el-button v-if="$hasMethod('#save')" size="small" type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getParameterList, getGoodsSetmealInfo, editGoodsSetmeal } from '@/api/audit'
export default {
  // props: ['editId', 'goodsId'],
  props: {
    editId: {
      type: String,
      default: ''
    },
    goodsId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      submitForm: {
        setmeal_id: '',
        title: '',
        lease_set: 1,
        is_huabei: 2,
        huabei_data: [
          {
            lease_term: '',
            rent_total: '',
            three_bear: '',
            three_fee: '',
            six_bear: '',
            six_fee: '',
            twelve_bear: '',
            twelve_fee: ''
          }
        ],
        quantity: '',
        foregift: '',
        is_buy_out: 1,
        price: '',
        buyout_amount: '',
        start_date: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入套餐名字', trigger: 'blur' }
        ],
        huabei_data: [
          { required: true, message: '请填写花呗设置', trigger: 'change' }
        ],
        quantity: [
          { required: true, message: '请输入库存数量', trigger: 'blur' }
        ],
        foregift: [
          { required: true, message: '请输入押金', trigger: 'blur' }
        ],
        is_buy_out: [
          { required: true, message: '请选择是否买断', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入官网价格', trigger: 'blur' }
        ],
        buyout_amount: [
          { required: true, message: '请输入买断价', trigger: 'blur' }
        ],
        lease_set: [
          { required: true, message: '请选择租期设置', trigger: 'change' }
        ]
      },
      monthList: [
        {
          lease_time: null,
          lease_price: ''
        }
      ], // 按月租期设置
      monthSelect: [], // 可选月租期
      dayList: [
        {
          lease_time: '',
          lease_price: ''
        }
      ], // 按天租期设置
      customList: [], // 自定义租期
      customForm: {
        lease_days: '',
        withhold_cycle: '',
        lease_price: ''
      },
      intervalList: [], // 可选租期间隔
      setForm: {
        third: '',
        sixth: '',
        twelve: ''
      },
      feeData: [
        {
          num: 3,
          merchant: '1.80%',
          user: '2.30%'
        },
        {
          num: 6,
          merchant: '4.50%',
          user: '4.50%'
        },
        {
          num: 12,
          merchant: '7.50%',
          user: '7.50%'
        }
      ],
      startDateSelect: [],
      rentType: 0
    }
  },
  mounted() {
    this.init()
    this.getInfo()
  },
  methods: {
    handleHbCheck(val) {
      if (val === 1) {
        if (this.submitForm.lease_set === 1) {
          for (const index in this.monthList) {
            const { lease_time, lease_price } = this.monthList[index]
            const rentTotal = (parseFloat(lease_price) * lease_time).toFixed(2)
            if (this.submitForm.huabei_data[index]) {
              this.submitForm.huabei_data[index].lease_term = lease_time
              this.submitForm.huabei_data[index].rent_total = rentTotal
            } else {
              this.submitForm.huabei_data[index] = {
                lease_term: lease_time,
                rent_total: rentTotal,
                three_bear: '',
                three_fee: '',
                six_bear: '',
                six_fee: '',
                twelve_bear: '',
                twelve_fee: ''
              }
            }
          }
        } else if (this.submitForm.lease_set === 2) {
          for (const index in this.dayList) {
            const { lease_time, lease_price } = this.dayList[index]
            const rentTotal = (parseFloat(lease_price) * lease_time).toFixed(2)
            if (this.submitForm.huabei_data[index]) {
              this.submitForm.huabei_data[index].lease_term = lease_time
              this.submitForm.huabei_data[index].rent_total = rentTotal
            } else {
              this.submitForm.huabei_data[index] = {
                lease_term: lease_time,
                rent_total: rentTotal,
                three_bear: '',
                three_fee: '',
                six_bear: '',
                six_fee: '',
                twelve_bear: '',
                twelve_fee: ''
              }
            }
          }
        }
      } else {
        this.submitForm.huabei_data = [
          {
            lease_term: '',
            rent_total: '',
            three_bear: '',
            three_fee: '',
            six_bear: '',
            six_fee: '',
            twelve_bear: '',
            twelve_fee: ''
          }
        ]
      }
    },
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (!this.validCheck()) {
            return
          }
          const params = { goods_id: this.goodsId, spec: [], ...this.submitForm, operation_type: 3 }
          if (this.submitForm.lease_set === 1) {
            params.spec = [...this.monthList]
          } else if (this.submitForm.lease_set === 2) {
            params.spec = [...this.dayList]
          } else {
            params.spec = [...this.customList]
          }
          editGoodsSetmeal(params).then(res => {
            this.$router.push({ name: 'goodsSuccess', params: { goodsId: this.goodsId }})
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    // 表单校验
    validCheck() {
      // 校验租期设置
      if (this.submitForm.lease_set === 1) {
        if (this.monthList.length === 0) {
          this.$message({
            message: '租期设置不能为空',
            type: 'warning'
          })
          return false
        }
        for (const item of this.monthList) {
          if (!item.lease_time || !item.lease_price) {
            this.$message({
              message: '租期设置必填项不能为空',
              type: 'warning'
            })
            return false
          }
        }
        const arr = this.monthList.map(k => k.lease_time)
        const uniqueArr = [...new Set(arr)]
        if (uniqueArr.length < arr.length) {
          this.$message({
            message: '租期设置租期不能重复',
            type: 'warning'
          })
          return false
        }
      } else if (this.submitForm.lease_set === 2) {
        if (this.dayList.length === 0) {
          this.$message({
            message: '租期设置不能为空',
            type: 'warning'
          })
          return false
        }
        for (const item of this.dayList) {
          if (!item.lease_time || !item.lease_price) {
            this.$message({
              message: '租期设置必填项不能为空',
              type: 'warning'
            })
            return false
          }
        }
        const arr = this.dayList.map(k => k.lease_time)
        const uniqueArr = [...new Set(arr)]
        if (uniqueArr.length < arr.length) {
          this.$message({
            message: '租期设置租期不能重复',
            type: 'warning'
          })
          return false
        }
      } else {
        if (this.customList.length === 0) {
          this.$message({
            message: '租期设置不能为空',
            type: 'warning'
          })
          return false
        }
        for (const item of this.customList) {
          for (const row of item) {
            if (!row.lease_price) {
              this.$message({
                message: '租期设置每期租金不能为空',
                type: 'warning'
              })
              return false
            }
          }
        }
      }
      if (this.submitForm.is_huabei === 1) {
        // 开启花呗，校验花呗设置数组
        if (this.submitForm.huabei_data.length === 0) {
          this.$message({
            message: '花呗设置不能为空',
            type: 'warning'
          })
          return false
        }
        for (const item of this.submitForm.huabei_data) {
          if (!item.three_bear || !item.six_bear || !item.twelve_bear) {
            this.$message({
              message: '花呗设置承担选项不能为空',
              type: 'warning'
            })
            return false
          }
        }
      }
      return true
    },
    // 切换租期设置类型
    changeType(val) {
      // 切换重置
      this.submitForm.is_huabei = 2
      this.submitForm.huabei_data = [
        {
          lease_term: '',
          rent_total: '',
          three_bear: '',
          three_fee: '',
          six_bear: '',
          six_fee: '',
          twelve_bear: '',
          twelve_fee: ''
        }
      ]
      this.monthList = [
        {
          lease_time: null,
          lease_price: ''
        }
      ]
      this.dayList = [
        {
          lease_time: '',
          lease_price: ''
        }
      ]
      this.customForm = {
        lease_days: '',
        withhold_cycle: '',
        lease_price: ''
      }
    },
    quickSet() {
      this.submitForm.huabei_data.forEach(element => {
        if (this.setForm.third) {
          element.three_bear = this.setForm.third
        }
        if (this.setForm.sixth) {
          element.six_bear = this.setForm.sixth
        }
        if (this.setForm.twelve) {
          element.twelve_bear = this.setForm.twelve
        }
        this.setHbFee(element)
      })
      // 清空上次设置
      this.setForm = {
        third: '',
        sixth: '',
        twelve: ''
      }
    },
    // 花呗承担切换
    changeHbBear(val, obj, key) {
      if (val === 1 || val === 2) {
        this.setHbFee(obj)
      } else {
        obj[key] = ''
      }
    },
    // 保留两位小数
    toFix2(calVal) {
      return (Math.round(calVal * 100) / 100).toFixed(2)
    },
    // 设置花呗分期承担金额
    setHbFee(tableItem) {
      if (tableItem.three_bear === 1) {
        tableItem.three_fee = this.toFix2(0.018 * tableItem.rent_total)
      }
      if (tableItem.three_bear === 2) {
        tableItem.three_fee = this.toFix2(0.023 * tableItem.rent_total)
      }
      if (tableItem.six_bear === 1) {
        tableItem.six_fee = this.toFix2(0.045 * tableItem.rent_total)
      }
      if (tableItem.six_bear === 2) {
        tableItem.six_fee = this.toFix2(0.045 * tableItem.rent_total)
      }
      if (tableItem.twelve_bear === 1) {
        tableItem.twelve_fee = this.toFix2(0.075 * tableItem.rent_total)
      }
      if (tableItem.twelve_bear === 2) {
        tableItem.twelve_fee = this.toFix2(0.075 * tableItem.rent_total)
      }
    },
    // 按月租期项更改
    itemChange(index) {
      const { lease_time, lease_price } = (this.submitForm.lease_set === 1 ? this.monthList[index] : this.dayList[index])
      if (!lease_time || !lease_price) {
        return
      }
      const hbSetItem = this.submitForm.huabei_data[index]
      hbSetItem.lease_term = lease_time
      hbSetItem.rent_total = (parseFloat(lease_price) * lease_time).toFixed(2)
      this.setHbFee(hbSetItem)
    },
    changeNumberInput(obj, key) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(obj[key])) {
        // input 框绑定的内容为空
        obj[key] = ''
      }
    },
    changeMoneyInput(obj, key) {
      const pattern = /^[0-9]+([.]{1}[0-9]{1,2})?$/ // 正数的正则表达式
      // 不符合正数时
      if (!pattern.test(obj[key])) {
        // input 框绑定的内容为空
        obj[key] = ''
      }
    },
    // 删除自定义租期
    removeCustomItem(index) {
      this.customList.splice(index, 1)
    },
    // 新增自定义租期
    addCustomItem() {
      if (!this.customForm.lease_days || !this.customForm.withhold_cycle) {
        this.$message({
          message: '总租期、租期间隔不能为空',
          type: 'warning'
        })
        return
      }
      const periodTotal = Math.ceil(parseInt(this.customForm.lease_days) / parseInt(this.customForm.withhold_cycle))
      const data = []
      for (let index = 1; index <= periodTotal; index++) {
        const obj = {
          which_period: index,
          lease_days: 0,
          withhold_cycle: this.customForm.withhold_cycle,
          lease_price: this.customForm.lease_price ? this.customForm.lease_price : 0
        }
        if (index * parseInt(this.customForm.withhold_cycle) <= this.customForm.lease_days) {
          obj.lease_days = this.customForm.withhold_cycle
        } else {
          obj.lease_days = parseInt(this.customForm.lease_days) % parseInt(this.customForm.withhold_cycle)
        }
        data.push(obj)
      }
      this.customList.push(data)
      // 清空表单
      this.customForm = {
        lease_days: '',
        withhold_cycle: '',
        lease_price: ''
      }
    },
    // 删除天租期
    removeDayItem(index) {
      this.dayList.splice(index, 1)
      this.submitForm.huabei_data.splice(index, 1)
    },
    // 新增天租期
    addDayItem() {
      this.dayList.push({
        lease_time: '',
        lease_price: ''
      })
      this.submitForm.huabei_data.push({
        lease_term: '',
        rent_total: '',
        three_bear: '',
        three_fee: '',
        six_bear: '',
        six_fee: '',
        twelve_bear: '',
        twelve_fee: ''
      })
    },
    // 删除月租期
    removeMonthItem(index) {
      this.monthList.splice(index, 1)
      this.submitForm.huabei_data.splice(index, 1)
    },
    // 新增月租期
    addMonthItem() {
      this.monthList.push({
        lease_time: null,
        lease_price: ''
      })
      this.submitForm.huabei_data.push({
        lease_term: '',
        rent_total: '',
        three_bear: '',
        three_fee: '',
        six_bear: '',
        six_fee: '',
        twelve_bear: '',
        twelve_fee: ''
      })
    },
    init() {
      getParameterList().then(res => {
        this.startDateSelect = res.start_date || []
        this.intervalList = res.withhold_cycle || []
        this.monthSelect = res.lease_term_month || []
      })
    },
    getInfo() {
      getGoodsSetmealInfo(this.editId).then(res => {
        for (const key in this.submitForm) {
          if (key === 'huabei_data') {
            if (res.is_huabei === 1) {
              this.submitForm[key] = res[key]
            }
          } else if (key === 'setmeal_id') {
            this.submitForm[key] = res.id
          } else {
            this.submitForm[key] = res[key]
          }
        }
        this.rentType = res.pact_type
        if (res.lease_set === 1) {
          this.monthList = res.spec
          if (this.submitForm.is_huabei === 2) {
            for (const index in this.monthList) {
              const { lease_time, lease_price } = this.monthList[index]
              const rentTotal = (parseFloat(lease_price) * lease_time).toFixed(2)
              if (index === 0) {
                this.submitForm.huabei_data[index].lease_term = lease_time
                this.submitForm.huabei_data[index].rent_total = rentTotal
              } else {
                this.submitForm.huabei_data.push({
                  lease_term: lease_time,
                  rent_total: rentTotal,
                  three_bear: '',
                  three_fee: '',
                  six_bear: '',
                  six_fee: '',
                  twelve_bear: '',
                  twelve_fee: ''
                })
              }
            }
          }
        } else if (res.lease_set === 2) {
          this.dayList = res.spec
          if (this.submitForm.is_huabei === 2) {
            for (const index in this.dayList) {
              const { lease_time, lease_price } = this.dayList[index]
              const rentTotal = (parseFloat(lease_price) * lease_time).toFixed(2)
              if (index === 0) {
                this.submitForm.huabei_data[index].lease_term = lease_time
                this.submitForm.huabei_data[index].rent_total = rentTotal
              } else {
                this.submitForm.huabei_data.push({
                  lease_term: lease_time,
                  rent_total: rentTotal,
                  three_bear: '',
                  three_fee: '',
                  six_bear: '',
                  six_fee: '',
                  twelve_bear: '',
                  twelve_fee: ''
                })
              }
            }
          }
        } else {
          this.customList = res.spec
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.meal_form {
  padding: 30px 120px 30px 0;
}

.set_wrap {
  padding: 20px;
  background-color: #fafafa;
}

.set_form {
  border-bottom: 1px dashed #cdcdcd;
  margin-bottom: 16px;

  .item {
    margin-bottom: 16px;
  }

  .el-select,
  .el-input {
    width: 160px;
  }
}

label {
  margin-right: 14px;
}

.required-icon {
  margin-right: 3px;
}

.add_btn {
  margin-left: 50px;
}

.suffix {
  background: #f5f5f5;
  border: 1px solid #dcdfe6;
  border-radius: 0 4px 4px 0;
  height: 40px;
  display: inline-block;
  padding: 0 8px;
  box-sizing: border-box;
  border-left: none;
  line-height: 38px;
}

.suffix.before {
  border-left: 1px solid #dcdfe6;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.day_form {
  /deep/.el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}

.custom_form {
  margin-top: 8px;
  margin-bottom: 8px;

  /deep/.el-input__inner,
  .el-select {
    border-radius: 0 4px 4px 0;
  }

  .no_border /deep/.el-input__inner {
    border-radius: 0;
  }

  &>div {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.custom_item+.custom_item {
  border-top: 1px dashed #cdcdcd;
  margin-top: 20px;
}

.table_item {
  /deep/th {
    padding: 0;
  }

  .suffix {
    height: 30px;
    line-height: 28px;
  }

  /deep/.el-input__inner {
    border-radius: 4px 0 0 4px;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }
}

.suffix_input {
  /deep/.el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}

.delete_btn {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 70px;
  border: 1px solid #ebeef5;
  border-left: none;
  background-color: #ffffff;
}

.tip {
  color: #999999;
  line-height: 35px;
}

.set_table {
  /deep/th {
    padding: 0;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }
}

.fix-footer-btns {
  .el-divider {
    background-color: #eeeeee;
    width: 95%;
    margin: 15px auto;
  }
}
</style>
